<template>
    <div>
        <el-upload
            ref="upload"
            name="images"
            :action="props.action"
            list-type="picture-card"
            accept=".jpg,.jpeg,.png"
            :on-success="handleSuccess"
            :file-list="fileLists"
            :headers="{token:token}"
            :limit="props.limit"
            :on-remove="handleRemove"
            :on-preview="handlePictureCardPreview"
            >      
            <el-icon><Plus /></el-icon>
            <template #tip>
                <div class="el-upload__tip">
                    <p>图片文件限定.jpg、.jpeg、.png</p>
                    <p>文件大小在1MB以内。</p>
                </div>
            </template>
        </el-upload>
        <el-dialog v-model="zoomInDialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>       
    </div>
</template>

<script setup>
import { localGet } from '@/utils'
import { reactive, ref, watch, computed } from 'vue'
import { Delete, Download, Plus, ZoomIn, EditPen } from '@element-plus/icons-vue'
import { genFileId } from 'element-plus'
const props = defineProps({
    limit:{
        type:Number,
        default:5,
    },
    action:{
        type:String,
        default:'#'
    },
    fileList:{
        type:Array,
        default: ()=>{
            return []
        }
    },
    father_method:Function
});
const upload = ref(null)
const disabled = ref(false)
const emit = defineEmits(['father_method']);
let dialogImageUrl = ref('');
let zoomInDialogVisible = ref(false);
let editURLDialogVisible=ref(false)
let fileLists=ref(props.fileList);
fileLists=props.fileList
const dialogVisible = ref(false)
let editForm=reactive({
    url:'',
    uid:null
})
const editUrlDialogVisible=ref(false)
const token=ref(localGet('token') || '')
const initFileList=computed(()=>{
    return props.fileList
  })
watch(initFileList,(newVal)=>{
    // console.log("uploadimage中监视",newVal)
    fileLists.splice(0,fileLists.length)
    for(let item of newVal){
        fileLists.push(item)
    }
})

// 移除图片
const handleRemove=(file,fileList)=> {
    // console.log("被删除的文件是：",file)
    // console.log("所有文件：",fileList)
    submitFileToFather()
}
const handlePictureCardPreview=(uploadFile)=>{
    // console.log("我要放大预览啦", uploadFile.url)
    dialogImageUrl.value = uploadFile.url;
    zoomInDialogVisible.value = true;

}
const handleSuccess=(response,file,fileList)=>{
    let obj = {
        name: file.name,
        status: "success",
        uid: file.uid,
        url: response.data.results,
    }
    fileLists.push(obj)
    // console.log("response", response)
    // console.log("fileList",fileList)
    // fileLists=fileList
    submitFileToFather()
}

// 将图片文件传回给父组件
const submitFileToFather=()=>{
    // console.log("我要发送给父组件啦",fileLists)
    if(props.father_method)props.father_method(fileLists)
}
// 用户选择超过规定数量的图片
const handleExceed = (files) => {
    alert("文件超出最大数量")
}
const modifyFileList=(fileList)=>{
    fileLists = fileList
}
  // 将修改fileList的方法暴露出去
defineExpose({ modifyFileList })
</script>

<style scoped>

</style>
